<template>
	<view class="page-main">
		<view class="material">
			<view class="material-head">
				<view class="material-head-col" style="width: 150rpx">
					<text class="material-head-col-text">货道</text>
				</view>
				<view class="material-head-col" style="width: 150rpx">
					<text class="material-head-col-text">容量</text>
				</view>
				<view class="material-head-col" style="width: 150rpx">
					<text class="material-head-col-text">单位数</text>
				</view>
				<view class="material-head-col" style="width: 150rpx">
					<text class="material-head-col-text">库存</text>
				</view>
				
				<view class="material-head-col" style="width: 150rpx">
					<text class="material-head-col-text">操作</text>
				</view>
			</view>
			<view class="material-list">
				<select-cabinet-item v-for="(item, index) in list" :item="item" :index="index"
					:batchSupplementStatus="batchSupplementStatus" @showInfo="showInfo"
					:materialBoxNum="material_box_num" :isPeel="isPeel"></select-cabinet-item>
			</view>
		</view>
		<info-popup :material="material" :selectCabinet="selectCabinet" :peel="boxNum" @managementinfo="managementinfo"
			@closeInfoPopup="closeInfoPopup" v-if="infoPopupShow" :workId="workId" :workOrder="workOrder" @getNewData="getNewData"
			:supplmentNum="supplementNum"></info-popup>
	</view>
</template>

<script>
	const API = require("../../../utils/apiConfig.js");
	import selectCabinetItem from './components/select-cabinet-item.vue';
	import infoPopup from './components/info-popup.vue';
	export default {
		components: {
			selectCabinetItem,
			infoPopup
		},
		data() {
			return {
				material: {}, //当前需要补料的物料
				is_empty: 0, //返回的列表是否包含空货道
				lastId: 0, //最后一条数据的ID，用于分页
				cabinetSelectValue: {},
				list:[],
				isPeel:false,
				material_box_num: 0,
				batchSupplementStatus: false, //是否正在批量补料
				infoPopupShow:false,
				selectCabinet: {}, //选择补货的货道
				material: {}, //当前需要补料的物料
				boxNum: 0,
				workId: '',
				supplementNum: 0,
				workOrder: false,
			}
		},
		onLoad(options) {
			this.material = JSON.parse(decodeURIComponent(options.material));
			console.log("material     " + JSON.stringify(this.material));
			this.modelselect();
		},
		methods: {
			modelselect(){
				API.modelselect({
					
				}).then((res)=>{
					console.log("freighttrack     " + JSON.stringify(res));
					this.cabinetSelectRange = res.data;
					this.cabinetSelectValue = res.data[0];
					this.freighttrack();
				})
			},
			freighttrack(){
				API.freighttrack({
					rows: 60,
					id: this.material.id,
					is_empty: this.is_empty,
					last_id: this.lastId,
					st_name: this.cabinetSelectValue.st_name,
					is_new: this.material.is_new
				}).then((res)=>{
					console.log("freighttrack     " + JSON.stringify(res));
					if(res.code ==0){
						this.list = res.data.list;
					}
				})
			},
			getNewData(){
				this.freighttrack();
				this.infoPopupShow = false;
			},
			async managementinfo(id, num) {
				
			},
			closeInfoPopup() {
				this.infoPopupShow = false;
				// this.handleBack();
				
			},
			showInfo(item) {
				this.infoPopupShow = true;
				this.selectCabinet = item;
			},
		}
	}
</script>

<style>
/* 页面容器样式 */
.page-main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
}

/* 物料区域样式 */
.material {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
}

/* 表头样式 */
.material-head {
  display: flex;
  padding: 20rpx 0;
  background-color: #333847;
  border-bottom: 1rpx solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 10;
}

.material-head-col {
  text-align: center;
  font-size: 26rpx;
  color: #fff;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.material-head-col-text {
  display: block;
  padding: 0 10rpx;
}

/* 列表容器样式 */
.material-list {
  flex: 1;
  overflow-y: auto;
}

/* 列表项通用样式（适配select-cabinet-item组件） */
.select-cabinet-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.select-cabinet-item-col {
  text-align: center;
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 10rpx;
}

/* 操作按钮样式 */
.cabinet-operation-btn {
  display: inline-block;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  color: #fff;
  background-color: #07c160;
  border-radius: 4rpx;
  margin: 0 5rpx;
}

.cabinet-operation-btn.disabled {
  background-color: #cccccc;
}

.cabinet-operation-btn.warning {
  background-color: #fa5151;
}

/* 响应式调整 */
@media (max-width: 600rpx) {
  .material-head-col,
  .select-cabinet-item-col {
    font-size: 24rpx;
    padding: 0 5rpx;
  }
  
  .cabinet-operation-btn {
    padding: 6rpx 12rpx;
    font-size: 22rpx;
  }
}
</style>
